{include file="public/header" /}
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m-t" name="edit_rule" id="edit_rule">
                        <input type="hidden" name="id" value="{$menu.id}">
                        <div class="form-group">
                            <label class="col-sm-3 control-label yanse">所属父级</label>
                            <div class="input-group col-sm-5">
                                <select name="pid" class="form-control m-b chosen-select" id="groupid">
                                    <option value="">顶级菜单</option>
                                    {foreach name="admin_rule" item="v"}
                                    <option value="{$v.id}" {eq name="$menu.pid" value="$v.id"}selected{/eq} {eq name="$menu.id" value="$v.id"}disabled{/eq}>{$v.title}</option>
                                    {/foreach}
                                </select>
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                                <a id="myEditors" style="color:#A94543"></a>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">菜单名称</label>
                            <div class="input-group col-sm-5">
                                <input id="title" type="text" class="form-control" name="title" required="" aria-required="true" value="{$menu.title}">
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">节点</label>
                            <div class="input-group col-sm-5">
                                <input type="text" name="name" id="name" value="{$menu.name}" placeholder="模块/控制器/方法 (一级节点添加“#” 二级节点添加“##”)"  class="form-control" />
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label icon"> 图标</label>
                            <div class="input-group col-sm-5">
                                <div class="input-group">
                                    <input type="text" name="css" id="css" value="{$menu.css}" placeholder="输入样式名称"  class="form-control" />
                                    <div class="input-group-btn">
                                        <a class="btn btn-info btn-outline" onclick="selectIcon()">
                                            选择图标
                                        </a>
                                    </div>
                                </div>
                                <a id="myCss" style="color:#A94543"></a>
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label"> 排序</label>
                            <div class="input-group col-sm-5">
                                <input type="text" name="sort" id="sort" value="{$menu.sort}" placeholder="输入排序"  class="form-control" />
                                <!--<span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 必填</span>-->
                            </div>
                        </div>
                        <div class="hr-line-dashed"></div>
                        <div class="form-group">
                            <div class="col-sm-5 col-sm-offset-3">
                                <button class="btn btn-primary addBtt" type="submit"><i class="fa fa-save"></i> 保存</button>&nbsp;&nbsp;&nbsp;
                                <a class="btn btn-danger" href="javascript:history.go(-1);"><i class="fa fa-close"></i> 关闭</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>

        </div>
    </div>
</div>
<!--选择图标-->
<div id="chooseicon" style="display:none">
    <div>
        <ul class="list-inline"><li data-font="#" data-toggle="tooltip" data-original-title="占位符" data-placement="bottom" onclick="choseThis(this)">#</li></ul>
    </div>
</div>
{include file="public/footer" /}
<script>
    //选择图标
    function selectIcon(){
        var index = wk.layer_show1('选择图标',$('#chooseicon'),700);
        $.each(Icon,function (index,item){
            var html = "";
            html = '<li data-font="' + item + '" data-toggle="tooltip" data-original-title="' + item + '" data-placement="bottom" onclick="choseThis(this)"><i class="' + item + '"></i></li>'
            $('.list-inline').append(html);
        })
        $("[data-toggle='tooltip']").tooltip();
    }
    function choseThis(obj){
        $('#css').val($(obj).attr('data-font'));
        $('.icon').css("color","#686B6D");
        $("input[name=css]").css("border","1px solid #CBD5DD");
        $("#myCss").css("display", "none");
        layer.closeAll();
    }
</script>
<script type="text/javascript">
    $('.addBtt').click(function(){
        var css = $("#css").val();
        if(css == ""){
            $('.icon').css("color","#ED5666");
            $("input[name=css]").css("border","1px solid #ED5666");
            $("#myCss").css("display","");
            $("#myCss").html("<i class='fa fa-times-circle'></i> 请选择图标");
        }
    })
    $("input[name=css]").change(function(){
        $('.icon').css("color","#686B6D");
        $(this).css("border","1px solid #CBD5DD");
        $("#myCss").css("display", "none");
    })
    $.validator.setDefaults({
        highlight: function(e) {
            $(e).closest(".form-group").removeClass("has-success").addClass("has-error")
            $(e).closest(".form-control").css("color","#737373");
        },
        success: function(e) {
            // e.closest(".form-group").removeClass("has-error").addClass("has-success")
            e.closest(".form-group").removeClass("has-error")
        },
        errorElement: "span",
        errorPlacement: function(e, r) {
            e.appendTo(r.is(":radio") || r.is(":checkbox") ? r.parent().parent().parent() : r.parent())
            if(r.is("#groupid")){
                e.appendTo(r.parent());
            }
        },
        errorClass: "help-block m-b-none",
        validClass: "help-block m-b-none"
    }), $().ready(function() {
        var e = "<i class='fa fa-times-circle'></i> ";
        jQuery.validator.addMethod("selectNoe", function(value, element) {
            var returnVal = true;
            var level = $("#groupid").val();
            if(level==""){
                returnVal = false;
            }
            return returnVal;
        }, e+"请选择管理员角色");
        $("#edit_rule").validate({
            rules: {
                title: {
                    required: !0,
                },
                name: {
                    required: !0,
                },
                sort: {
                    required: !0,
                    digits:true
                }

            },
            messages: {
                title: {
                    required: e + "请输入菜单名称",
                },
                name: {
                    required: e + "请输入模块/控制器/方法",
                },
                sort: {
                    required: e + "请输入输入排序",
                    digits:e+"请输入整数"
                }
            },
            submitHandler: function(form) { //通过之后回调
//进行ajax传值
//                 var formData = new FormData($("#userAdd" )[0]);
                var css = $("#css").val();
                if(css == ""){
                    $('.icon').css("color","#ED5666");
                    $("input[name=css]").css("border","1px solid #ED5666");
                    $("#myCss").css("display","");
                    $("#myCss").html("<i class='fa fa-times-circle'></i> 请选择图标");
                    return false;
                }
                $('button').attr('disabled','disabled');
                $.ajax({
                    url : "{:url('edit_rule')}",
                    type : "post",
                    dataType : "json",
                    data:$("#edit_rule").serialize(),
                    success : function(data) {
                        if(data.code==200){
                            wk.success(data.msg,1,"{:url('menu/index')}");
                        }else{
                            $('button').removeAttr('disabled');
                            wk.error(data.msg,2,'');
                            return false;
                        }
                    }
                });
            },
        })
    });
</script>
</body>
</html>